<template>
  <div style="margin: 15px">

    <el-row :gutter="20">
      <el-col :span="4">
        <el-input prefix-icon="el-icon-search" v-model="deptName" placeholder="请输入部门名称" clearable/>
        <el-tree :data="department" style="margin-top: 20px" :default-expand-all="true"></el-tree>
      </el-col>

      <el-col :span="20">
        <el-form :model="selectForm" ref="dialogForm" class="demo-dialogForm" v-show="toggle" inline>
          <el-form-item label="用户名称" prop="userName" size="medium">
            <el-input v-model="selectForm.userName" placeholder="请输入用户名称"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="phonenumber" size="medium">
            <el-input v-model="selectForm.phonenumber" placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status" size="medium">
            <el-select v-model="selectForm.status" placeholder="用户状态" clearable>
              <el-option label="正常" value="0"></el-option>
              <el-option label="停用" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作时间" size="medium">
            <el-date-picker
                style="width: 205px;margin-right: 10px"
                v-model="selectForm.operTime"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
            <el-button type="primary" icon="el-icon-search" @click="selectList" size="mini">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="reset" size="mini">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row>
          <el-button icon="el-icon-plus" plain type="primary" @click="insertHandler" size="mini">新增</el-button>
          <el-button type="danger" plain icon="el-icon-delete" @click="deleteHandler" size="mini">删除</el-button>
          <div class="right-toolbar" style="float: right">
            <el-tooltip class="item" effect="dark" :content="toggle?'隐藏搜索':'显示搜索'" placement="top">
              <el-button size="mini" circle icon="el-icon-search" @click="toggle=!toggle"/>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="刷新" placement="top">
              <el-button size="mini" circle icon="el-icon-refresh" @click="selectList"/>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="显隐列" placement="top">
              <el-button size="mini" circle icon="el-icon-menu" @click="toggleList"/>
            </el-tooltip>
          </div>
        </el-row>

        <el-table
            ref="multipleTable"
            :data="deptForm"
            :header-cell-style="style"
            tooltip-effect="dark"
            style="width: 100%;margin-top: 10px"
            @selection-change="handleSelectionChange">
          <el-table-column align="center" type="selection">
          </el-table-column>
          <el-table-column align="center" prop="userId" label="用户编号">
          </el-table-column>
          <el-table-column align="center" prop="userName" label="用户名称">
          </el-table-column>
          <el-table-column align="center" prop="nickName" label="用户昵称">
          </el-table-column>
          <el-table-column align="center" prop="dept.deptName" label="部门">
          </el-table-column>
          <el-table-column align="center" prop="phonenumber" label="手机号码">
          </el-table-column>
          <el-table-column align="center" prop="status" label="状态">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.status" active-value="0" inactive-value="1"></el-switch>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="创建时间" width="160">
          </el-table-column>
          <el-table-column align="center" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-edit" @click="editRow(scope.row)">修改</el-button>
              <el-button type="text" icon="el-icon-delete" @click="deleteRow(scope.row.userId)">删除</el-button>
              <el-dropdown size="small" @command="toAuth">
                <el-button type="text" icon="el-icon-d-arrow-right">更多</el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="el-icon-key" command="password">重置密码</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-circle-check" :command="scope.row">分配角色</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-dialog :title="msg==='post'?'新增用户':'修改用户'" :visible.sync="dialogFormVisible" width="600px">
      <el-form :model="form" label-width="70px" size="mini" inline>
        <el-form-item label="用户昵称">
          <el-input v-model="form.nickName" placeholder="请选择用户昵称"></el-input>
        </el-form-item>
        <el-form-item label="归属部门">
          <el-select v-model="form.dept.deptName" placeholder="请选择归属部门">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="form.phonenumber" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="用户名称" v-if="msg==='post'">
          <el-input v-model="form.userName" placeholder="请输入用户名称"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" v-if="msg==='post'">
          <el-input v-model="form.password" placeholder="请输入用户密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="用户性别">
          <el-select v-model="form.sex" placeholder="请选择性别">
            <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option>
            <el-option label="未知" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="岗位">
          <el-select v-model="form.postIds" multiple placeholder="请选择岗位">
            <el-option
                v-for="item in posts"
                :key="item.postId"
                :label="item.postName"
                :value="item.postId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="form.roleIds" multiple placeholder="请选择角色">
            <el-option
                v-for="item in roles"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="form.remark" placeholder="请输入内容" style="width: 400px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDialogForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

const BASE_URL = "http://124.222.238.167/prod-api"
const TOKEN = "Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImI2YTgzOTVlLWIyY2QtNDJiMi1iYzQ2LWI4OGY5OGU0NmFlNiJ9.h3dSz2zOj5LHVxxwNLSDJdt_VBDwMucP31ZKE9mwyTE7cFmMZ2u7WL6JVOrMkIE8Lhqjnj9fhubpRgalEtcM8g"
export default {
  name: "UserView",
  data() {
    return {
      pageSize: 10,
      pageNum: 1,
      deptName: '',
      department: [],
      selectForm: {
        userName: '',
        phonenumber: '',
        status: ''
      },
      deptForm: [],
      toggle: true,
      multipleSelection: '',
      ids: [],
      dialogFormVisible: false,
      msg: '',
      posts: {},
      roles: {},
      form: {
        userId: '',
        nickName: '',
        dept: {},
        phonenumber: '',
        email: '',
        userName: '',
        password: 123456,
        sex: '',
        status: "0",
        postIds: [],
        roleIds: [],
        remark: ''
      }
    }
  },
  created() {
    this.selectTree()
    this.selectList()
  },
  methods: {
    toAuth(data) {
      if (data === 'password') {
        this.$message.error("功能暂未开发")
      } else {
        this.$router.push({
          name: 'UserAuthView',
          params: {
            userId: data.userId,
          }
        })
      }
    },
    style() {
      return "background-color:RGB(248,248,249);color:RGB(81,90,110)"
    },
    selectTree() {
      axios({
        url: BASE_URL + "/system/user/deptTree",
        headers: {
          Authorization: TOKEN
        }
      }).then(res => {
        this.department = res.data.data
      })
    },
    selectList() {
      axios({
        url: BASE_URL + "/system/user/list",
        method: 'get',
        params: {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          userName: this.selectForm.userName,
          phonenumber: this.selectForm.phonenumber,
          status: this.selectForm.status
        },
        headers: {
          Authorization: TOKEN
        }
      }).then(res => {
        this.deptForm = res.data.rows
        console.log(this.deptForm)
      })
    },
    insertHandler() {
      this.form = this.$options.data().form
      this.msg = "post"
      this.dialogFormVisible = true
      axios({
        url: BASE_URL + "/system/user/",
        method: 'get',
        headers: {
          Authorization: TOKEN
        }
      }).then(res => {
        this.posts = res.data.posts
        this.roles = res.data.roles
        console.log(this.posts)
      })
    },
    editRow(row) {
      this.form = this.$options.data().form
      this.msg = 'put'
      this.form = JSON.parse(JSON.stringify(row))
      axios({
        url: BASE_URL + "/system/user/" + row.userId,
        method: 'get',
        headers: {
          Authorization: TOKEN
        }
      }).then(res => {
        this.posts = res.data.posts
        this.roles = res.data.roles
        this.form.postIds = res.data.postIds
        this.form.roleIds = res.data.roleIds
      })
      this.dialogFormVisible = true
    },
    deleteIds(ids) {
      axios({
        url: BASE_URL + "/system/user/" + ids,
        method: 'delete',
        headers: {
          Authorization: TOKEN
        }
      }).then(res => {
        if (res.data.code !== 200) {
          this.$message.error("删除失败")
          console.log(res)
          return
        }
        console.log(res)
        this.$message.success("删除成功")
        this.selectList()
      })
    },
    submitDialogForm() {
      axios({
        url: BASE_URL + '/system/user',
        method: this.msg,
        headers: {
          Authorization: TOKEN,
        },
        data: this.form
      }).then(res => {
        if (res.data.code !== 200) {
          this.$message.error(res.data.msg)
          return
        }
        this.$message.success(this.msg + "成功")
        this.selectList()
      }).finally(() => {
        this.dialogFormVisible = false
      })
    },
    deleteHandler() {
      this.deleteIds(this.ids)
    },
    deleteRow(id) {
      this.deleteIds(id)
    },
    moreRow() {
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.ids = this.multipleSelection.map(i => i.userId)
    },
    reset() {
      this.selectForm = {}
      this.listNotice()
    },
    toggleList() {
      this.$message.error("功能暂未开发")
    }
  }
}
</script>

<style scoped lang="scss">
</style>